<template>
    <view class="margin-top">
        <view class="hb-bar bg-white solid-bottom">
            <view class="action">
               <text class="hb-icon_title text-blue"></text>
                标签形状
            </view>
        </view>
        <view class="padding flex flex-wrap justify-between align-center bg-white">
            <view class='hb-tag'>默认</view>
            <view class='hb-tag round'>椭圆</view>
            <view class='hb-tag radius'>圆角</view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                标签尺寸
            </view>
        </view>
        <view class="padding flex flex-wrap justify-between align-center bg-white">
            <view class='hb-tag radius sm'>小尺寸</view>
            <view class='hb-tag radius'>普通尺寸</view>
        </view>

        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                标签颜色
            </view>
        </view>
        <view class="padding flex flex-wrap justify-between align-center bg-white">
            <view class='hb-tag radius bg-green'>绿色</view>
            <view class='hb-tag radius bg-red'>红色</view>
            <view class='hb-tag radius bg-yellow'>黄色</view>
            <view class='hb-tag radius bg-blue'>深蓝</view>
            <view class='hb-tag radius bg-light_blue'>浅蓝</view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                标签镂空
            </view>
        </view>
        <view class="padding flex flex-wrap justify-between align-center bg-white">
            <view class='hb-tag radius line-green'>绿色</view>
            <view class='hb-tag radius line-red'>红色</view>
            <view class='hb-tag radius line-yellow'>黄色</view>
            <view class='hb-tag radius line-blue'>深蓝</view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                胶囊标签
            </view>
        </view>
        <view class="padding flex flex-wrap justify-between align-center bg-white">
            <view class="hb-capsule">
                <view class='hb-tag bg-red'>
                    <text class='hb-icon_qr_code'></text>
                </view>
                <view class="hb-tag line-red">
                    12
                </view>
            </view>
            <view class="hb-capsule round">
                <view class='hb-tag bg-blue '>
                    <text class='hb-icon_qr_code'></text>
                </view>
                <view class="hb-tag line-blue">
                    23
                </view>
            </view>
            <view class="hb-capsule round">
                <view class='hb-tag bg-blue '>
                    说明
                </view>
                <view class="hb-tag line-blue">
                    123
                </view>
            </view>
            <view class="hb-capsule radius">
                <view class='hb-tag bg-yellow '>
                    说明
                </view>
                <view class="hb-tag line-yellow">
                    23
                </view>
            </view>
            <view class="hb-capsule radius">
                <view class='hb-tag bg-yellow sm'>
                    说明
                </view>
                <view class="hb-tag line-yellow sm">
                    23
                </view>
            </view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                头像徽章
            </view>
        </view>
        <view class="padding flex flex-wrap justify-between align-center bg-white">
            <view class='hb-avatar xl radius'>
                张
                <view class="hb-tag badge">99+</view>
            </view>
            <view class='hb-avatar xl round'>
                张
                <view class="hb-tag badge">99+</view>
            </view>
        </view>
    </view>
</template>

<script>
</script>

<style>
</style>
